<template>
    <div class="main-box">
        <div class="top-box">
            <div class="mb-5">{{userInfo.nick}}</div>
            <div @click="loginOut">退出账号</div>
        </div>
        <div class="info-box">
        </div>
        <div class="item-list">
            <div class="item-box">
                <div @click="goTo('patient')">
                    <van-image width="60" height="60" src="/static/img/huanzhe.png" />
                    <div>患者管理</div>
                </div>
                <div @click="goTo('keyan')">
                    <van-image width="60" height="60" src="/static/img/huanzhe.png" />
                    <div>科研管理</div>
                </div>
            </div>
            <div class="item-box">
                <div @click="goTo('chat')">
                    <van-image width="60" height="60" src="/static/img/huanzhe.png" />
                    <div>随访管理</div>
                </div>
                <!-- <div @click="goTo('team')">
                    <van-image width="60" height="60" src="/static/img/huanzhe.png" />
                    <div>团队协作</div>
                </div> -->
                <div @click="goTo('jiesuan')">
                    <van-image width="60" height="60" src="/static/img/huanzhe.png" />
                    <div>结算</div>
                </div>
            </div>
            <!-- <div class="item-box">
                <div @click="goTo('video')">
                    <van-image width="60" height="60" src="/static/img/huanzhe.png" />
                    <div>宣教管理</div>
                </div>
                <div @click="goTo('share')">
                    <van-image width="60" height="60" src="/static/img/huanzhe.png" />
                    <div>病案分享</div>
                </div>
            </div>
            <div class="item-box">
                <div @click="goTo('huizhen')">
                    <van-image width="60" height="60" src="/static/img/huanzhe.png" />
                    <div>会诊</div>
                </div>
                <div @click="goTo('zhuanzhen')">
                    <van-image width="60" height="60" src="/static/img/huanzhe.png" />
                    <div>转诊</div>
                </div>
            </div> -->
            <div class="item-box">
                <div @click="goTo('video')">
                    <van-image width="60" height="60" src="/static/img/huanzhe.png" />
                    <div>宣教管理</div>
                </div>
                <!-- <div @click="goTo('xuqiu')">
                    <van-image width="60" height="60" src="/static/img/huanzhe.png" />
                    <div>需求</div>
                </div> -->
                <div @click="goTo('tool')">
                    <van-image width="60" height="60" src="/static/img/huanzhe.png" />
                    <div>服务工具</div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import { ref, onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showConfirmDialog, showToast } from 'vant';
import { getUserInfo, log, LOCAL_USER, LOCAL_DATE } from "../utils/user"

export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        const userInfo = getUserInfo();
        if (!userInfo) {
            router.push("/login")
        }
        log("user", userInfo)
        const goTo = (name) => {
            if (name == "patient") {
                router.push("/Patients")
            }
            if (name == "keyan") {
                router.push("/MyKy")
            }
            if (name == "fuWu") {
                router.push("/FuWu")
            }
            if (name == "chat") {
                router.push("/ChatList")
            }
            if (name == "video") {
                router.push("/Video")
            }
            if (name == "share") {
                router.push("/Share")
            }
            if (name == "jiesuan") {
                router.push("/JieSuan")
            }
            if (name == "tool") {
                router.push("/Tool")
            }
        }
        const loginOut = () => {
            showConfirmDialog({
                title: '提示',
                message: '您确认退出账号吗?',
            })
                .then(() => {
                    localStorage.setItem(LOCAL_USER, null);
                    showToast("退出成功")
                    router.push("/login")
                })
                .catch(() => {
                });
        }

        const onTabChange = (name) => {
            if (name == "family") {
                router.push("/DangAn")
            }
            if (name == "message") {
                router.push("/Message")
            }
            if (name == "user") {
                router.push("/User")
            }
        }

        return {
            goTo,
            loginOut,
            userInfo,
        };
    },
};
</script>

<style scoped>
.main-box {
    margin: 10px;
}

.top-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 2vh;
}

.info-box {
    height: 20vh;
    background: #49B9AD;
    padding: 1vh 0 1vh 0;
    /* border-radius: 20px;
        padding: 40px;
        background-image: url("/static/img/topBg.png");
        background-size: cover;
        background-size: cover;
        background-repeat: repeat; */
    color: #FFFFFF;
    font-size: 23px;
}

.info-item {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    margin: 2vh 0;
}

.info-title {
    margin-top: 1vh;
    font-size: 14px;
}
.item-list{
    padding: 2vh 6vw;
}
.item-box {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    text-align: center;
    color: #1C2023;
    font-size: 14px;
    margin-top: 3vh;
}
</style>